<template>
  <div>
    <div class="bg-blue p-15 m-t-10">
      <p>
        您可以在此处查看到无人船巡航时，实时拍摄的最新照片与拍摄时间的上传，点击图片可以放大显示。
      </p>
    </div>
    <el-card class="box-card card-header m-t-20">
      <div slot="header" class="clearfix f-medium">
        <i class="fa fa-photo m-r-10 text-c-blue" aria-hidden="true"></i>
        <span>同步拍摄</span>
      </div>
      <div class="photo-view flex-col-center">
        <div class="loading text-center" v-show="loading">
          <i class="el-icon-loading"></i>
          <p class="text-c-gray f-medium">WS-连接中,请稍后...</p>
        </div>
        <el-row :gutter="20" class="photos" v-show="!loading">
          <el-col :span="4" v-for="(o, index) in dataList" :key="index">
            <!-- <img :src="o.url" alt="" width="100%" /> -->
            <el-image :src="o.url" :preview-src-list="[o.url]" style="width: 100%; height: 100%" lazy width="100%">
            </el-image>
            <div class="text-center">
              {{ o.time }}
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="loading text-center" v-show="!loading">
        <i class="el-icon-upload"></i>
        <p class="text-c-gray f-medium">
          WS-连接成功,将持续等待无人船同步上传...
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入时间处理函数
import format from "@/utils/formatData";
import WebSocket from "@/utils/websocketPackage";
export default {
  name: "ShowPhoto",
  data() {
    return {
      loading: true,
      dataList: [],
      socket: null,
      options: {
        url: "ws://175.178.124.20:8589/imserver/admin",
        onopen: () => {
          this.loading = false;
          console.log("websocket连接成功");
        },
        onmessage: (res) => {
          console.log(res);
          let url = res;
          let time = format(new Date(), "hh:ii:ss");
          this.dataList.push({ url, time });
        },
        onerror: () => {
          this.loading = false;
        },
        onclose: () => {
          this.loading = false;
        },
        // 保活周期 10s
        timer: 30000,
        // 断线重连
        reconnect: true,
      },
    };
  },
  mounted() {
    this.socket = new WebSocket(this.options);
  },
  beforeDestroy() {
    this.socket.close();
    this.socket = null;
  },
};
</script>

<style scoped lang="less">
.loading {
  font-size: 50px;
  color: var(--theme);
  cursor: progress;
}

.photo-view {
  min-height: 350px;
  transition: all 0.3s;

  .photos {
    min-height: 350px;

    &>div.el-col {
      position: relative;
      padding: 10px;
      margin-bottom: 5px;
      box-sizing: border-box;
      transition: all 0.2s;
      border: 1px solid transparent;
      border-radius: 3px;
      cursor: pointer;

      &:hover {
        z-index: 1;
        background-color: #d5f5ff;
        border: 1px solid #ddd;
      }
    }
  }
}

.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}
</style>